<template>
  <div class="trend-wrap">
    <div class="trend-title">合同收款趋势（近五年对比）</div>
    <div class="trend-chart-scroll">
      <div ref="chart" class="trend-chart"></div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts';
const COLORS = ['#2d8cf0', '#ff9900', '#19be6b', '#ed4014','#9932CC'];
export default {
  name: 'ContractTrend',
  props: {
    months: {
      type: Array,
      default: () => []
    },
    series: {
      type: Array, // [{name: '2023年', data: [...]}, {name: '2024年', data: [...]}]
      default: () => []
    },
    legend: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.drawChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
  },
  watch: {
    months() { this.drawChart(); },
    series() { this.drawChart(); },
    legend() { this.drawChart(); }
  },
  methods: {
    drawChart() {
      if (!this.$refs.chart) return;
      const myChart = echarts.init(this.$refs.chart);
      myChart.setOption({
        tooltip: { trigger: 'axis' },
        legend: {
          data: this.legend,
          top: 8
        },
        grid: { left: 40, right: 24, top: 48, bottom: 40, containLabel: true },
        xAxis: {
          type: 'category',
          data: this.months,
          boundaryGap: false,
          axisLine: { lineStyle: { color: '#ccc' } },
          axisLabel: { interval: 0 }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLine: { lineStyle: { color: '#ccc' } }
        },
        series: this.series.map((s, idx) => ({
          name: s.name,
          type: 'line',
          data: s.data,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: { color: COLORS[idx % COLORS.length], width: 3 },
          itemStyle: { color: COLORS[idx % COLORS.length] },
          areaStyle: { color: COLORS[idx % COLORS.length] + '22' }
        }))
      });
      this.myChart = myChart;
      this.resizeChart();
    },
    resizeChart() {
      if (this.myChart) {
        this.myChart.resize();
      }
    }
  }
};
</script>
<style scoped>
.trend-wrap {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 0 0 0;
  margin-top: 15px;
}
.trend-title {
  font-weight: bold;
  font-size: 16px;
  margin: 0 0 12px 24px;
}
.trend-chart-scroll {
  width: 100%;
  overflow-x: auto;
}
.trend-chart {
  min-width: 600px;
  width: 100%;
  height: 320px;
}
</style> 